<template>
	<view class="container">
		
		<view class="boxPanel">
		  <textarea cols="30" rows="5" placeholder="请输入投诉建议内容..." placeholder-class="placeholder" v-model="content" maxlength="-1"></textarea>
		</view>
		
		<view class="font-30 text-bold m-24">上传图片</view>
		
		<view class="uploadbox">
			<view class="upload" v-for="(i, t) in imgList" :key="t">
				<image :src="$util.img(i)" mode="aspectFill" @click="preview(i,t)" class="img"></image>
				<view class="imgDel" @click="deleteImg(i,t)">
		      <image :src="$util.img('image/close.png')" mode=""></image>
		    </view>
			</view>
		  <view class="upload" @click="addImg()" v-if="imgList.length < 6 || imgList.length == undefined">
		    <image :src="$util.img('image/upload.png')" mode="" class="img"></image>
		  </view>
		</view>
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="submit()">提交</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				imgList: [],
				content: '',
				isSubmitting: false, //防止重复提交
			}
		},
		onLoad() {
			this.isIphoneX = this.$util.uniappIsIPhoneX()
		},
		methods: {
			submit() {
			  if(!this.content) {
			    this.$util.showToast({title: "请填写意见"});
			    return
			  }
			  
			  if(this.isSubmitting) return
			  this.isSubmitting = true;

			  this.$api.sendRequest({
			    url: "/api/member/feedback",
			    data: {
			      content: this.content,
			      images: this.imgList.length?this.imgList.join(','):''
			    },
			    success: res => {
			      if(res.code == 0) {
			        this.$util.showToast({title: "您的反馈已提交"});
			        setTimeout(function() {
			          uni.navigateBack();
			        },2000)
			      }else {
						this.isSubmitting = false;
			        	this.$util.showToast({title: res.message})
			      }
			    }
			  })
			},
			//添加图片
			addImg(e) {
				let size = this.imgList.length ? this.imgList.length : 0
				this.$util.upload(6 - size, {}, res => {
					this.imgList = this.imgList.concat(res);
				});
			},
			//删除图片
			deleteImg(i,j) {
				this.imgList.splice(j, 1);
			},
			// 图片预览
			preview(i, j) {
				let urls = this.imgList;
				for (let k = 0; k < urls.length; k++) {
					urls[k] = this.$util.img(urls[k])
				}
				uni.previewImage({
					urls: urls,
					current: i
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.boxpanel {
  .inputs {
    font-size: 28rpx;
    color: #B5B9C7;
  }
  textarea {
    height: 300rpx;
  }
}

.uploadbox {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		margin: 0 30rpx 30rpx;
    
		.upload {
		  width: 160rpx;
		  height: 160rpx;
		  margin-right: 20rpx;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  border-radius: 20rpx;
		  margin-bottom: 30rpx;
		  position: relative;
      
      .img {
      	width: 160rpx;
      	height: 160rpx;
      	border-radius: 20rpx;
      }
      
      .imgDel {
      	width: 33rpx;
      	height: 33rpx;
      	position: absolute;
      	right: -20rpx;
      	top: -20rpx;
      	display: flex;
      	justify-content: center;
      	align-items: center;
      	image {
          width: 33rpx;
          height: 33rpx;
        }
      }
      
    }
    
}
</style>
